<template>
    <section class="collection">
      <img class="bottom-je" src="static/image/mainPage/collection/je-design.png" alt="">
      <img class="top-work" src="static/image/mainPage/collection/work.png" alt="">
      <img class="top-01" src="static/image/mainPage/collection/01.png" alt="">
      <div class="line-div">
        <div class="line"></div>
      </div>
      <div :class="moveFlag ? 'content move-right' : 'content'" ref="collectionContent">
        <div class="content-item" v-for="(item, index) in cardData" :key="index">
          <div v-if="index%2 !== 0" class="empty"></div>
          <img :src="item.imageUrl" alt="" @click="imgCardClick(item)">
        </div>
      </div>
      <div class="move-hover move-hover-left" @mouseover="hoverMove('left')"></div>
    </section>
</template>
<script>
export default {
    data () {
        return {
          downX: 0,
          upX: 0,
          moveFlag: false,
          cardData: [
            {imageUrl: 'static/image/mainPage/collection/phone.png', name: '手机端'},
            {imageUrl: 'static/image/mainPage/collection/hayun.png', name: '哈云官网'},
            {imageUrl: 'static/image/mainPage/collection/huaxia.png', name: '华夏官网'},
            {imageUrl: 'static/image/mainPage/collection/quanyou.png', name: '拳友官网'},
            {imageUrl: 'static/image/mainPage/collection/chahua.png', name: '手绘'},
          ]
        }
    },
    mounted() {
      document.addEventListener('DOMMouseScroll', this.scrollFunc, false);
      window.onmousewheel = document.onmousewheel = this.scrollFunc;
      this.$refs.collectionContent.addEventListener('mousedown', this.mousedown);
      this.$refs.collectionContent.addEventListener('mouseup', this.mouseup);
      this.$bus.on('hoverMover', (type) => {
        type === 'right' ? this.moveFlag = true : this.moveFlag = false;
      })
    },
    methods: {
      // 鼠标按下事件
      mousedown(event) {
        this.downX = event.screenX;
      },
      // 鼠标放开事件
      mouseup(event) {
        this.upX = event.screenX;
        if (this.downX === this.upX) return;
        this.downX !== this.upX && this.downX < this.upX ? this.moveFlag = false : this.moveFlag = true;
      },
      // 图片点击事件
      imgCardClick(data) {
        this.$bus.emit('imgCardClick', data);
      },
      // 鼠标滚轮滚动事件
      scrollFunc(e) {
        e = e || window.event;
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
            if (e.wheelDelta > 0) { //当滑轮向上滚动时
              this.moveFlag = false;
            }
            if (e.wheelDelta < 0) { //当滑轮向下滚动时
              this.moveFlag = true;
            }
        } else if (e.detail) {  //Firefox滑轮事件
            if (e.detail > 0) { //当滑轮向上滚动时
              this.moveFlag = false;
            }
            if (e.detail < 0) { //当滑轮向下滚动时
              this.moveFlag = true;
            }
        }
      },
      hoverMove() {
        this.moveFlag = false;
      }
    },
    beforeDestroy() {
      document.removeEventListener('DOMMouseScroll', this.scrollFunc, false);
      window.onmousewheel = document.onmousewheel = '';
      this.$refs.collectionContent.removeEventListener('mousedown', this.mousedown);
      this.$refs.collectionContent.removeEventListener('mouseup', this.mouseup);
      this.$bus.off('hoverMover');
    }
}
</script>
<style lang='less' scoped>
  .collection {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    .bottom-je {
      width: 25rem;
      position: absolute;
      bottom: 8%;
      left: 4%;
      z-index: 1;
    }
    .top-work {
      width: 10rem;
      z-index: 1;
      right: 3%;
      top: 5%;
      position: absolute;
    }
    .top-01 {
      width: 7rem;
      z-index: 1;
      right: 3%;
      top: 11%;
      position: absolute;
    }
    .line-div {
      position: absolute;
      bottom: 8%;
      width:100%;
      .line {
        position: relative;
        left: 34rem;
        width: 30rem;
        height: .2rem;
        background:rgba(89,89,89,1);
      }
    }
    .content {
      /* Safari and Chrome */
      -webkit-transition: all .5s ease-in-out;
      /* Firefox 4 */
      -moz-transition: all .5s ease-in-out;
      /* Opera */
      -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
      cursor: w-resize;
      overflow: hidden;
      width: 125%;
      height: 65%;
      position: relative;
      right: -10%;
      top: 17.5%;
      display: flex;
      justify-content: space-between;
      .content-item {
        width: 17%;
        height: 100%;
        display: flex;
        flex-direction: column;
        img {
          cursor: pointer;
          width: 100%;
        }
        .empty {
          flex: 1;
        }
      }
    }
    .move-right {
      right: 33%;
      cursor: e-resize;
    }
    .move-hover {
			position: fixed;
			width: 10rem;
			height: 100vh;
      z-index: 1;
      left: 0;
      bottom: 0;
		}
  }
</style>
